<template>
	<view class="container">
		<view v-if="list == null || list.length == 0" class="data-empty-wh100">
			<u-empty />
		</view>

		<view v-else class="layout" style="height: 100%; padding-bottom: 50px; background-color: #f7f8fa">
			<view style="height: 100%; overflow-y: scroll">
				<view style="margin: 15rpx; background-color: #fff; border-radius: 10px; padding: 8px 4px" @click="onItemClick(item)" v-for="(item, index) in list" :key="item.id">
					<view class="fold" style="padding: 15rpx 15rpx 15rpx 0">
						<view class="tree-icon" style="margin: 0 5px" v-show="item.fold && item.children.length > 0" @tap.stop="unfold(index)">
							<!-- 向右箭头 -->
							<image style="width: 8px; height: 8px" src="/static/images/icon/down.png"></image>
						</view>
						<view @tap.stop="unfold(index)" style="margin: 0 5px" class="tree-icon" v-show="!item.fold && item.children.length > 0">
							<!-- 向下箭头 -->
							<image style="width: 8px; height: 8px" src="/static/images/icon/right.png"></image>
						</view>
						<view
							:style="{
								paddingLeft: item.children.length == 0 ? '20px' : '0px'
							}"
						>
							{{ item.name }}
						</view>
					</view>

					<view
						class="subtree"
						v-if="item.fold"
						v-for="(item1, index1) in item.children"
						@click="onItemClick(item1)"
						:key="item1.id"
						style="display: flex; padding: 15rpx 15rpx 15rpx 0"
					>
						<!-- @click="foldChildren(index, index1)" -->
						<view class="tree-content" style="padding-left: 30px; padding-right: 20rpx">
							<text>{{ item1.name }}</text>
						</view>

						<view class="fold1" v-for="(item2, index2) in item1.children" @click="onItemClick(item2)" :key="item2.id" v-if="item1.fold">
							<view class="tree1">
								<u-icon class="icon-children" name="minus-circle" size="24.5px" color="#C0C0C0"></u-icon>
							</view>
							<view>
								<text>{{ item2.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view
			class="bottom-add"
			style="
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 50px;
				background-color: #f3c45d;
				color: #fff;
				font-size: 18px;
				font-weight: bold;
			"
			@click="fabClick"
		>
			新建分类
		</view>
	</view>
</template>

<script>
import { corpId, storeId } from '../../../constants/apiConstants';
import { toastIconEnum } from '../../../constants/uiConstants';
import { umodal, utoast } from '../../../utils/uniUtils.js';
import { isIntegerOrNumericStringOrEmpty } from '../../../utils/stringUtils.js';
import { reactive, onMounted, toRefs, getCurrentInstance } from '@vue/composition-api';

export default {
	name: 'foodcategorylist',
	components: {},
	setup() {
		// 生命周期
		onMounted(async () => {
			await GetDepartment();
			await GetFoodCategory();
		});

		const { proxy } = getCurrentInstance();

		// 数据定义
		const data = reactive({
			departmentList: [],
			pattern: {
				buttonColor: '#F3C45D'
			},
			show: false, // 是否显示弹窗
			canView: false, // 是否显示查看弹窗
			type: 'add', // 弹窗类型  1.add 添加  2.edit  编辑
			form: {
				// 表单
				id: 99999999,
				corpId: corpId,
				isDelete: false,
				storeId: storeId,
				name: '',
				createTime: '2199-12-12 00:00:00',
				modifyTime: 0
			},
			list: [], // 数据源
			viewItem: {}, // 查看的数据
			details: {}, // 当前显示的菜品分类
			disabled: true,
			FoodCategoryEnum: [
				{
					id: 0,
					name: '无上级分类'
				}
			]
		});

		/**
		 * 添加按钮添加事件
		 */
		function fabClick() {
			uni.navigateTo({
				url: '/pages/workbench/foodcategory/doAdd'
			});
		}

		function open() {
			data.show = true;
			// console.log('open');
		}

		function close() {
			data.show = false;
			// console.log('close');
		}

		function viewOpen() {
			data.canView = true;
			// console.log('open');
		}

		function viewClose() {
			data.canView = false;
			// console.log('close');
		}

		async function btnDelClick(id) {
			if (await umodal()) {
				const res = await DelFoodCategory({ id });
				if (res.code == 0) {
					await utoast(res.msg);
					GetFoodCategory();
				} else {
					await utoast(res.msg);
				}
			}
		}

		/**
		 * 编辑按钮点击事件
		 * @param item
		 */
		async function btnEditClick(item) {
			data.disabled = false;
		}

		/**
		 * 查
		 */
		async function GetFoodCategory() {
			let {
				data: { list }
			} = await proxy.$api.GetFoodCategory({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('list-->', list);
			list.forEach((element) => {
				element.label = element.name;
				element.fold = false;
				if (element.children.length > 0) {
					element.children.map((item) => {
						item.label = item.name;
						item.fold = false;
					});
				}
			});

			data.list = list;
			if (list.length > 0) {
				data.details = list[0];
			}
		}

		/**
		 * 获取部门列表
		 */
		const GetDepartment = async () => {
			let {
				data: { list }
			} = await proxy.$api.GetDepartment({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('部门列表-->', list);
			data.departmentList = list;
		};

		/**
		 * 删
		 */
		async function DelFoodCategory() {
			await proxy.$api.DelFoodCategory({
				id: data.details.id
			});
		}

		/**
		 * 改
		 * @returns {Promise<void>}
		 * @constructor
		 */
		async function EditFoodCategory() {
			return await proxy.$api.EditFoodCategory(data.details);
		}

		function unfold(index) {
			console.log(index);
			data.list[index].fold = !data.list[index].fold;
		}

		function foldChildren(index, index1) {
			data.list[index].children[index1].fold = !data.list[index].children[index1].fold;
		}

		/**
		 *
		 * @param item 菜单点击事件
		 */
		function onItemClick(item) {
			uni.navigateTo({
				url: '/pages/workbench/foodcategory/doEdit?id=' + item.id
			});
		}

		async function btnDel() {
			if (details.children.length > 0) {
				await utoast('请先删除子项！', toastIconEnum.error);
				return;
			}
			const res = await umodal();
			// 确定删除
			if (res) {
				const result = await DelFoodCategory();
				await utoast('删除成功！');
				await GetFoodCategory();
			}
		}

		/**
		 *保存按钮点击事件
		 */
		async function btnSaveClick() {
			console.log('提交表单', data.details);
			data.details.name = data.details.name.trim();
			data.details.byName = data.details.byName.trim();
			data.details.helpCode = data.details.helpCode.trim();

			if (data.details.name.length == 0) {
				utoast('名称为空！！', 'error');
				return;
			}

			if (data.details.byName.length == 0) {
				utoast('分类别名为空！', 'error');
				return;
			}

			if (data.details.helpCode.length == 0) {
				utoast('助记码为空！', 'error');
				return;
			}

			if (data.details.sort == null) {
				data.details.sort == 0;
			}

			if (!isIntegerOrNumericStringOrEmpty(data.details.sort)) {
				utoast('排序必须为数字', 'error');
				return;
			}

			const res = await EditFoodCategory();
			if (res?.code == 0) {
				utoast('操作成功');
				setTimeout(async () => {
					uni.hideToast();
					data.disabled = true;
					await GetFoodCategory();
				}, 2000);
			} else {
				setTimeout(() => {
					console.log('fail', data.lock);
				}, 2000);
			}
		}

		const bindPickerDepartChange = (e) => {
			data.details.departId = data.departmentList[e.detail.value].id;
			// console.log(e, "e", data.details);
		};

		const bindPicker1Change = (e) => {
			// console.log("e-->", e);
			data.details.parentId = data.FoodCategoryEnum[e.detail.value].id;
		};

		return {
			...toRefs(data),
			fabClick,
			btnEditClick,
			btnDelClick,
			close,
			open,
			viewClose,
			viewOpen,
			unfold,
			foldChildren,
			onItemClick,
			btnDel,
			btnSaveClick,
			bindPickerDepartChange,
			bindPicker1Change
		};
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100.1vh;
	overflow-y: scroll;

	.form-item {
		display: flex;
		align-items: center;
		padding: 14rpx 0;

		.lbl {
			width: 80px;
			font-size: 14px;
		}

		.form-item-right {
			flex: 1;
		}
	}

	.img {
		width: 20px;
		height: 20px;
	}
	.fold {
		display: flex;
	}

	.btn-group {
		display: flex;
		justify-content: space-around;
		padding-top: 22rpx;
	}
}
</style>
